<template>
    <div class="goods-list">
        <!-- 调用地址 -->
        <!-- 标签跳转 -->
        <!-- <router-link class="goods-item" v-for="item in goodslist" :key="item.id" :to="'/home/goodsinfo'+item.id" tag="div">
            <img src="item.img_url" alt="">
            <h1 class="title">{{item.title}}</h1>
            <div class="info">
                <p class="price">
                    <span class="now">￥{{item.sell_price}}</span>
                    <span class="old">￥{{item.market_price}}</span>
                </p>
                <p class="cell">
                    <span>热卖中</span>
                    <span>剩{{item.stack_quantity}}件</span>
                </p>
            </div>
        </router-link> -->
        <!-- 在网页中的两种跳转方式1、a标签：标签跳转2、window.location.href:编程式导航 -->
        <div class="goods-item" v-for="item in goodslist" :key="item.id" @click="goDetail(item.id)">
            <img src="item.img_url" alt="">
            <h1 class="title">{{item.title}}</h1>
            <div class="info">
                <p class="price">
                    <span class="now">￥{{item.sell_price}}</span>
                    <span class="old">￥{{item.market_price}}</span>
                </p>
                <p class="cell">
                    <span>热卖中</span>
                    <span>剩{{item.stack_quantity}}件</span>
                </p>
            </div>
        </div>
        <!-- 模板 -->
        <div class="goods-item">
            <img src="https://img11.360buyimg.com/cms/jfs/t1/56301/5/10386/211488/5d780797E72ea2320/08919f815acbc696.jpg!q95.webp" alt="">
            <h1 class="title">Apple iPhone 11 Pro (A2217) 64GB 金色 移动联通电信4G手机 双卡双待</h1>
            <div class="info">
                <p class="price">
                    <span class="now">￥600</span>
                    <span class="old">￥999</span>
                </p>
                <p class="cell">
                    <span>热卖中</span>
                    <span>剩30件</span>
                </p>
            </div>
        </div>
        <div class="goods-item">
            <img src="https://img11.360buyimg.com/cms/jfs/t1/56301/5/10386/211488/5d780797E72ea2320/08919f815acbc696.jpg!q95.webp" alt="">
            <h1 class="title">Apple iPhone 11 Pro (A2217) 64GB 金色 移动联通电信4G手机 双卡双待</h1>
            <div class="info">
                <p class="price">
                    <span class="now">￥600</span>
                    <span class="old">￥999</span>
                </p>
                <p class="cell">
                    <span>热卖中</span>
                    <span>剩30件</span>
                </p>
            </div>
        </div>
         <div class="goods-item">
            <img src="https://img11.360buyimg.com/cms/jfs/t1/56301/5/10386/211488/5d780797E72ea2320/08919f815acbc696.jpg!q95.webp" alt="">
            <h1 class="title">Apple iPhone 11 Pro (A2217) 64GB 金色 移动联通电信4G手机 双卡双待</h1>
            <div class="info">
                <p class="price">
                    <span class="now">￥600</span>
                    <span class="old">￥999</span>
                </p>
                <p class="cell">
                    <span>热卖中</span>
                    <span>剩30件</span>
                </p>
            </div>
        </div>
        <!-- <h3>商品购买</h3> -->
        <mt-button type="danger" size="large" @click="getMore">加载更多</mt-button>
    </div>
</template>
<script>
export default {
    //data是往自己的组件内部挂载一些私有的数据
    data() {
        return {
            pageindex:1,//分页的页数
            goodslist:[],//存放商品列表的数组
        }
    },
    created() {
        this.getCoodsList();
    },
    methods: {
        getCoodsList(){
            // 获取商品列表
            this.$http.get('api/getgoods?pageindex='+this.pageindex).then(result => {
                if(result.body.status === 0){
                    // this.goodslist=result.body.message;
                    this.goodslist=this.goodslist.concat(result.body.message);
                }
            })
        },
        getMore(){
            this.pageindex++;
            this.getCoodsList();
        },
        goDetail(id){
            // 使用js形式进行路由导航
            // this.$route（参数对象，所有路由中的参数，params,query都属于）
            // 和this.$router对象（路由导航对象，方便使用js代码实现路由的前进，后退，跳转到URL地址）
            //简单的
           // this.$router.push('home/goodsinfo/'+id);
            // 传递对象
            // this.$router.push({path:"home/goodsinfo/"+id});
            // 传递命名的路由
            this.$router.push({name:'goodsinfo',params:{id} })
        }
    },
}
</script>
<style scoped lang="scss">
.goods-list {
    display: flex;
    flex-wrap: wrap;
    padding: 6px;
    justify-content: space-between;
}
.goods-item {
    width: 47%;
    border: 1px solid #ccc;
    box-shadow: 0 0 8px #cccccc;
    margin: 4px;
    padding: 2px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 293px;
    img{
        width: 100%;
    }
    .title {
        font-size: 14px;
    }
    .info {
        background-color: #eeeeee;
        p {
            margin: 0px;
            padding: 4px;
        }
        .price {
            .now {
                color: red;
                font-weight: bold;
                font-size: 16px;
            }
            .old {
                text-decoration: line-through;
                font-size: 12px;
                margin-left: 16px;
            }
        }
        .cell{
            display: flex;
            justify-content: space-between;
            font-size: 13px;
        }
    }
}
</style>